<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据字段注释填写帮助器</title>
    <!-- 引入 layui.css -->
    <link href="/static/lib/layui/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="/static/lib/layui/layui.js"></script>
    <style>
        #json-show-box{
            border: 2px solid #999;
            min-height: 200px;
            padding: 20px;
        }
        .layui-form-item{
            width: 22%;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>
    <form class="layui-form" style="padding: 20px 0;" lay-filter="form-val-filter" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">Label：</label>
            <div class="layui-input-inline">
                <input type="text" name="label"  lay-verify="required"  autocomplete="off" class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证规则：</label>
            <div class="layui-input-inline">
                <input type="text" name="rule" autocomplete="off" class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">数据类型：</label>
            <div class="layui-input-inline">
                <select name="dataType">
                    <option value="string">字符串</option>
                    <option value="bool">布尔值</option>
                    <option value="array">数组</option>
                    <option value="int">整数</option>
                    <option value="float">浮点数</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">表格显示：</label>
            <div class="layui-input-inline">
                <input type="checkbox" name="show" title="是|否" lay-skin="switch" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">显示类型：</label>
            <div class="layui-input-inline">
                <select name="showType">
                    <option value="text">字符串</option>
                    <option value="image">图片</option>
                    <option value="status">状态</option>
                    <option value="video">视频</option>
                    <option value="file">文件</option>
                    <option value="state">自定义状态</option>
                    <option value="switch">开关</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">显示宽度：</label>
            <div class="layui-input-inline">
                <input type="text" name="showWidth" autocomplete="off" class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否搜索：</label>
            <div class="layui-input-inline">
                <input type="checkbox" name="search" title="是|否" lay-skin="switch" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">搜索类型：</label>
            <div class="layui-input-inline">
                <select name="searchType">
                    <option value="input">输入框</option>
                    <option value="select">下拉框</option>
                    <option value="cascader">级联选择器</option>
                    <option value="date">日期</option>
                    <option value="datetime">日期时间</option>
                    <option value="year">年</option>
                    <option value="month">月</option>
                    <option value="week">周</option>
                    <option value="datetimerange">日期时间范围</option>
                    <option value="daterange">日期范围</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">表达式：</label>
            <div class="layui-input-inline">
                <select name="searchExp">
                    like,not like,in,not in,between,not between,null,not null,time,>,<,>=,<=,=,<>(!=),find(FIND_IN_SET)
                    <option value="=">等于</option>
                    <option value=">">大于</option>
                    <option value=">=">大于等于</option>
                    <option value="<">小于</option>
                    <option value="<=">小于等于</option>
                    <option value="<>">不等于</option>
                    <option value="like">Like</option>
                    <option value="not like">Not Like</option>
                    <option value="in">In</option>
                    <option value="not in">Not In</option>
                    <option value="between">Between</option>
                    <option value="not between">Not Between</option>
                    <option value="null">为null</option>
                    <option value="not null">不为null</option>
                    <option value="time">时间查询</option>
                    <option value="find">FIND_IN_SET</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否编辑：</label>
            <div class="layui-input-inline">
                <input type="checkbox" name="edit" title="是|否" lay-skin="switch" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">编辑类型：</label>
            <div class="layui-input-inline">
                <select name="editType">
                    <option value="text">文本输入</option>
                    <option value="radio">单选</option>
                    <option value="select">下拉</option>
                    <option value="switch">开关</option>
                    <option value="image">上传图片</option>
                    <option value="video">上传视频</option>
                    <option value="file">上传文件</option>
                    <option value="editor">富文本编辑</option>
                    <option value="checkbox">多选</option>
                    <option value="date">日期时间</option>
                    <option value="cascader">级联</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">编辑宽度：</label>
            <div class="layui-input-inline">
                <input type="text" name="editSize" autocomplete="off" class="layui-input" value="12">
            </div>
        </div>
        <div class="layui-form-item" style="width:100%;">
            <label class="layui-form-label">文本框类型</label>
            <div class="layui-input-inline">
                <input type="text" name="inputType" autocomplete="off" class="layui-input" value="">
            </div>
            <div class="layui-form-mid">类型为图片,文件时为上传数量限制。为日期时间类型时，填写：date,datetime,daterange,datetimerange</div>
        </div>

        <div class="layui-form-item" style="width:100%;">
            <label class="layui-form-label">字段注释：</label>
            <div class="layui-input-block">
                <input type="text" name="comment" autocomplete="off" class="layui-input" value="">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" id="add-form" >生成JSON</button>
            </div>
        </div>
    </form>
</div>
<hr class="layui-border-red">
<div id="json-show-box">

</div>
</body>
</html>
<script>
    !function(){
        var $ = layui.$;
        //监听提交
        $('#add-form').on('click', function() {

            var d = layui.form.val('form-val-filter'),i;
            console.log(d);
            d.edit = d.edit === 'on';
            d.search = d.search === 'on';
            d.show =  d.show === 'on';

            var jS = JSON.stringify(d);
            $('#json-show-box').text(jS);

            if(location.href.startsWith('https')){
                navigator.clipboard.writeText(jS).then(function() {
                    layui.layer.msg("复制成功！");
                })
            }

            layui.form.val('form-val-filter',{
                label:'',
                showWidth: '',
                inputType: '',
                comment: '',
                rule: ''
            });
            return !1;
        });


    }();
</script>